import React from "react";
import './index.scss';

export default function LiItem(props) {
	const {deleteRecord,triggerItemComlete,index,item,content} = props

	const delItem = () => deleteRecord(index)
	const handleChange = () => triggerItemComlete(index)
	return (
		<div className={`todo-item ${item.completed ? 'completed' : ''}`}>
			<input type="checkbox" checked={item.completed} onChange={handleChange}/>
			<label>{content}</label>
			<button onClick={delItem}></button>
		</div>
	);
}
